<template>
  <div>
    <el-button  class="publish-notice" type="success" @click="publishNotice">发布公告</el-button>
    <el-table border :data="notice_list" stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="content" label="内容">
        </el-table-column>
        <el-table-column prop="time" label="时间">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <div class="page">
        <el-pagination :page-size="4"
            layout="prev, pager, next" @current-change="handleCurPage"
            :total="total" :current-page="page">
        </el-pagination>
    </div>     
    <common-modal v-show="is_show" v-on:closeme="close" v-on:confirm="confirm">
            <h3 slot="header-title">发布公告</h3>
            <div slot="body">
                标题：<el-input v-model="title" placeholder="请输入内容"></el-input>
            </div>
            <div slot="body" style="margin-top:2%;">
                内容：<el-input v-model="content" type="textarea" placeholder="请输入内容"></el-input>
            </div>        
    </common-modal>
  </div>
</template>

<script>
  import commonModal from '../../components/commonModal.vue'
  export default{
    components:{
        'common-modal':commonModal
    },      
      data(){
          return {
              notice_list:[
                  {
                      "title":"test标题",
                      "content":"明日早7:00～9:00，跑步收益将会变为原来的两倍。",
                      "time":"2021-04-23 17:00"
                  }
              ],
              title:"",
              content:"",
              is_show:false,
              page:1,
              page_size:5,
              total:1
          }
      },
      mounted:function(){
          this.getNotices()
      },
      methods:{
          publishNotice(){
              this.is_show=true;
          },
          getNotices(){
            this.$ajax({
                method: 'post',
                url: 'get_notice',
                data: {
                "page":this.page,
                "page_size":this.page_size
                }
            }).
            then(res => {
                this.notice_list=res.data.res_msg
                this.total=res.data.len%this.page_size
            });               
          },
          close(){
              this.is_show=false;
          },
          getDate(){
            let date = new Date();
            let time=date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()
            return time
          },
          confirm(){
              //这里调接口
              this.is_show=false;
              let msg={
                  "title":this.title,
                  "content":this.content,
                  "time":this.getDate()
              }
              console.log(msg)
            this.$ajax({
                method: 'post',
                url: 'publish_notice',
                data: msg
            }).
            then(res => {
                this.page=1
                this.getNotices()
                this.$message.success("发布成功！");
                
            });                
              
          },
          handleCurPage(page){
              this.page=page
              this.getNotices()
          },
          remove(row){
            this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //在这里调用删除接口
                console.log(row._id);
                this.$ajax({
                    method: 'post',
                    url: 'remove_notice',
                    data: {
                    "_id":row._id
                    }
                }).
                then(res => {
                    console.log(res)
                    this.page=1
                    this.getNotices()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });               
                }); 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });                  
          }
      },
  }
</script>


<style lang="scss" scoped>
    .publish-notice{
        margin: 0 0 2% 0 ;
    }
    .page{
        margin-top: 1%;
        margin-left: 75%;
        margin-left: 80%;
    }
</style>
